import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入字体图标
import './assets/fonts/iconfont.css'
// 导入全局样式表
import './assets/css/global.css'
// 导入vue-table-with-tree-grid插件
import TreeTable from 'vue-table-with-tree-grid'

// 导入axios的包
import axios from 'axios'

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'

// 导入 Nprogress 包对应的JS和CSS --实现进度条的显示与隐藏
import Nprogress from 'nprogress'

// 为axios配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

// 通过axios拦截器添加token验证
// 在 request 拦截器中，展示进度条  Nprogress.start()
axios.interceptors.request.use(config => {
    // console.log(config)

    // 展示进度条
    Nprogress.start()

    // 为请求头对象添加token验证的authorization字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
        // 在最后必须return config
    return config
        // axios中有 interceptors 属性，其中有 request 成员，就是一个请求拦截器
        // 再通过 use 挂载一个回调函数，只要有请求通过 axios 发送到后台，就必然会优先调用 use 回调函数
        // return 就是将处理过的请求头返回
        // 也就是说这个请求拦截器就是一个预处理的过程
        // 只需要在项目的 main.js 文件中全局设置一次即可
})

// 在 response 拦截器中隐藏进度条  Nprogress.done()
axios.interceptors.response.use(config => {
    Nprogress.done()
    return config
})

// 把axios的包挂载到Vue的原型对象上
Vue.prototype.$http = axios

Vue.config.productionTip = false

// 将vue-table-with-tree-grid注册为全局可用的组件
Vue.component('tree-table', TreeTable)

// 将富文本编辑器，注册为全局可用的组件
Vue.use(VueQuillEditor)

// 注册一个全局的时间过滤器，用来处理时间格式问题
// originVal 形参是我们将要处理的那个数据
Vue.filter('dateFormat', function(originVal) {
    // 根据给定的时间 ，得到一个日期对象，然后传给 dt
    const dt = new Date(originVal * 1000)

    // Vue.filter 接收两个参数，第一个作为起名字兼 id，
    // 第二个则基于函数作为其处理程序。然后是在模板中使用它：
    // <!-- 只需要在需要使用它的地方加一个 “|” ，后面在跟上这个 filter 的名字即可，
    // 调用的时候， “|” 前面的值将自动作为参数传入到这个 filter 的处理函数中，
    //  而函数的返回值将替换掉原来的值，渲染在模板中。-->

    // padStart 的作用是填充， 第一个参数代表总长度多少位， 第二个参数是用什么字符串来填充
    const y = dt.getFullYear()
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    const d = (dt.getDay() + '').padStart(2, '0')

    const hh = (dt.getHours() + '').padStart(2, '0')
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')